<template>
  <Page class="bg-gradient-to-br from-[#f5f7fa] to-[#e4edf5] text-[#333] leading-[1.6] min-h-screen px-[15rpx] pt-[20rpx] pb-[80rpx]">
    <view class="container max-w-[500rpx] mx-auto">
      <!-- 头部区域 -->
      <view class="header text-center mb-[30rpx] pt-[20rpx] pb-[20rpx]">
        <view class="logo w-[80rpx] h-[80rpx] bg-gradient-to-br from-[#3498db] to-[#1a5f9e] rounded-full flex items-center justify-center mx-auto mb-[15rpx] text-white text-[36rpx] shadow-[0_4rpx_15rpx_rgba(52,152,219,0.3)]">
          <IconFont name="icon-user-plus" />
        </view>
        <view class="text-[24rpx] font-bold text-[#343a40] mb-[10rpx]">用户注册</view>
        <view class="text-[14rpx] text-[#6c757d]">加入平台，开启您的创业之旅</view>
      </view>
      
      <!-- 进度条 -->
      <view class="progress-bar flex justify-between relative my-[30rpx]">
        <view 
          class="progress-line absolute top-[12rpx] left-0 h-[4rpx] bg-[#e0e0e0] z-[1]"
          style="width: 100%;"
        ></view>
        <view 
          class="progress-line absolute top-[12rpx] left-0 h-[4rpx] bg-[#3498db] z-[2] transition-all duration-400"
          :style="{ width: progressWidth }"
        ></view>
        
        <view 
          v-for="(step, index) in steps" 
          :key="index"
          class="progress-step relative z-[3] text-center w-[24%]"
          :class="{ 
            'active': currentStep === index + 1,
            'completed': currentStep > index + 1
          }"
        >
          <view class="step-icon w-[28rpx] h-[28rpx] bg-white border-2 border-[#e0e0e0] rounded-full flex items-center justify-center mx-auto mb-[8rpx] text-[12rpx] text-[#6c757d]">
            <IconFont 
              name="icon-check" 
              v-if="currentStep > index + 1" 
              class="text-white"
            ></IconFont>
            <text v-else>{{ index + 1 }}</text>
          </view>
          <view class="step-label text-[12rpx] text-[#6c757d]">{{ step }}</view>
        </view>
      </view>
      
      <!-- 手机验证步骤 -->
      <view 
        class="form-container bg-white rounded-[16rpx] p-[25rpx] shadow-[0_6rpx_20rpx_rgba(0,0,0,0.08)] mb-[20rpx] relative overflow-hidden"
        v-if="currentStep === 1"
      >
        <view class="absolute top-0 left-0 right-0 h-[4rpx] bg-gradient-to-r from-[#3498db] to-[#2ecc71]"></view>
        
        <view class="form-title flex items-center text-[18rpx] font-semibold mb-[20rpx] text-[#343a40]">
          <IconFont name="icon-mobile-alt" class="mr-[10rpx] text-[#3498db]"></IconFont>
          <text>手机号验证</text>
        </view>
        
        <view class="form-group mb-[20rpx]">
          <view class="form-label block mb-[8rpx] font-semibold text-[#343a40]">
            手机号码
            <text class="text-[#e74c3c] ml-[4rpx]">*</text>
          </view>
          <view class="input-group relative">
            <view class="input-icon absolute left-[12rpx] top-1/2 -translate-y-1/2 text-[#6c757d]">
              <IconFont name="icon-phone" />
            </view>
            <nut-input 
              v-model="phoneNumber"
              type="tel"
              class="form-control w-full px-[40rpx] py-[14rpx] border border-[#e0e0e0] rounded-[10rpx] text-[15rpx] focus:border-[#3498db] focus:shadow-[0_0_0_3rpx_rgba(52,152,219,0.2)] outline-none transition-all duration-300"
              placeholder="请输入您的手机号码"
            ></nut-input>
          </view>
        </view>
        
        <view class="form-group mb-[20rpx]">
          <view class="form-label block mb-[8rpx] font-semibold text-[#343a40]">
            短信验证码
            <text class="text-[#e74c3c] ml-[4rpx]">*</text>
          </view>
          <view class="input-with-btn flex">
            <view class="input-group relative flex-1">
              <view class="input-icon absolute left-[12rpx] top-1/2 -translate-y-1/2 text-[#6c757d]">
                <IconFont name="icon-sms" />
              </view>
              <nut-input 
                v-model="smsCode"
                type="text"
                class="form-control w-full px-[40rpx] py-[14rpx] border border-[#e0e0e0] rounded-[10rpx_0_0_10rpx] text-[15rpx] focus:border-[#3498db] focus:shadow-[0_0_0_3rpx_rgba(52,152,219,0.2)] outline-none transition-all duration-300"
                placeholder="请输入6位验证码"
              ></nut-input>
            </view>
            <nut-button 
              class="sms-btn bg-[#f1f9ff] border border-[#e0e0e0] border-l-0 rounded-[0_10rpx_10rpx_0] px-[15rpx] text-[#3498db] font-semibold cursor-pointer transition-all duration-300"
              :disabled="isCounting"
              @click="sendSms"
            >
              <text v-if="!isCounting">获取验证码</text>
              <text v-if="isCounting">{{ countDown }}s</text>
            </nut-button>
          </view>
          <view class="note text-[12rpx] text-[#6c757d] mt-[5rpx]">
            验证码已发送至您的手机，5分钟内有效
          </view>
        </view>
        
        <nut-button 
          class="btn btn-primary w-full py-[14rpx] rounded-[10rpx] border-none text-[16rpx] font-semibold bg-gradient-to-r from-[#3498db] to-[#2980b9] text-white shadow-[0_4rpx_12rpx_rgba(52,152,219,0.3)] transition-all duration-300"
          @click="nextStep"
          :disabled="!phoneNumber || !smsCode"
        >
          下一步
        </nut-button>
      </view>
      
      <!-- 完善资料步骤 -->
      <view 
        class="form-container bg-white rounded-[16rpx] p-[25rpx] shadow-[0_6rpx_20rpx_rgba(0,0,0,0.08)] mb-[20rpx] relative overflow-hidden"
        v-if="currentStep === 2"
      >
        <view class="absolute top-0 left-0 right-0 h-[4rpx] bg-gradient-to-r from-[#3498db] to-[#2ecc71]"></view>
        
        <view class="form-title flex items-center text-[18rpx] font-semibold mb-[20rpx] text-[#343a40]">
          <IconFont name="icon-user-edit" class="mr-[10rpx] text-[#3498db]"></IconFont>
          <text>完善个人资料</text>
        </view>
        
        <view class="form-group mb-[20rpx]">
          <view class="form-label block mb-[8rpx] font-semibold text-[#343a40]">
            真实姓名
            <text class="text-[#e74c3c] ml-[4rpx]">*</text>
          </view>
          <view class="input-group relative">
            <view class="input-icon absolute left-[12rpx] top-1/2 -translate-y-1/2 text-[#6c757d]">
              <IconFont name="icon-user" />
            </view>
            <nut-input 
              v-model="userInfo.realName"
              type="text"
              class="form-control w-full px-[40rpx] py-[14rpx] border border-[#e0e0e0] rounded-[10rpx] text-[15rpx] focus:border-[#3498db] focus:shadow-[0_0_0_3rpx_rgba(52,152,219,0.2)] outline-none transition-all duration-300"
              placeholder="请输入您的真实姓名"
            ></nut-input>
          </view>
        </view>
        
        <view class="form-group mb-[20rpx]">
          <view class="form-label block mb-[8rpx] font-semibold text-[#343a40]">
            设置登录密码
            <text class="text-[#e74c3c] ml-[4rpx]">*</text>
          </view>
          <view class="input-group relative">
            <view class="input-icon absolute left-[12rpx] top-1/2 -translate-y-1/2 text-[#6c757d]">
              <IconFont name="icon-lock" />
            </view>
            <nut-input 
              v-model="userInfo.password"
              type="password"
              class="form-control w-full px-[40rpx] py-[14rpx] border border-[#e0e0e0] rounded-[10rpx] text-[15rpx] focus:border-[#3498db] focus:shadow-[0_0_0_3rpx_rgba(52,152,219,0.2)] outline-none transition-all duration-300"
              placeholder="设置6-20位登录密码"
            ></nut-input>
          </view>
        </view>
        
        <view class="form-group mb-[20rpx]">
          <view class="form-label block mb-[8rpx] font-semibold text-[#343a40]">
            设置交易密码
            <text class="text-[#e74c3c] ml-[4rpx]">*</text>
          </view>
          <view class="input-group relative">
            <view class="input-icon absolute left-[12rpx] top-1/2 -translate-y-1/2 text-[#6c757d]">
              <IconFont name="icon-key" />
            </view>
            <nut-input 
              v-model="userInfo.tradePassword"
              type="password"
              class="form-control w-full px-[40rpx] py-[14rpx] border border-[#e0e0e0] rounded-[10rpx] text-[15rpx] focus:border-[#3498db] focus:shadow-[0_0_0_3rpx_rgba(52,152,219,0.2)] outline-none transition-all duration-300"
              placeholder="设置6位数字交易密码"
            ></nut-input>
          </view>
          <view class="note text-[12rpx] text-[#6c757d] mt-[5rpx]">
            交易密码用于资金操作，请勿与登录密码相同
          </view>
        </view>
        
        <view class="form-group mb-[20rpx]">
          <view class="form-label block mb-[8rpx] font-semibold text-[#343a40]">邀请码 (选填)</view>
          <view class="input-group relative">
            <view class="input-icon absolute left-[12rpx] top-1/2 -translate-y-1/2 text-[#6c757d]">
              <IconFont name="icon-user-friends" />
            </view>
            <nut-input 
              v-model="userInfo.inviteCode"
              type="text"
              class="form-control w-full px-[40rpx] py-[14rpx] border border-[#e0e0e0] rounded-[10rpx] text-[15rpx] focus:border-[#3498db] focus:shadow-[0_0_0_3rpx_rgba(52,152,219,0.2)] outline-none transition-all duration-300"
              placeholder="请输入邀请人邀请码"
            ></nut-input>
          </view>
        </view>
        
        <view class="info-box bg-[#f8f9fa] border-l-4 border-[#3498db] p-[12rpx_15rpx] rounded-[8rpx] my-[15rpx] text-[13rpx]">
          <view class="mb-[5rpx]">
            <text class="font-medium text-[#e74c3c]">重要提示：</text>
            <text>除浏览外，其他功能必须实名认证后方能参与，包括提现平台账户款项。</text>
          </view>
          <view class="mb-[5rpx]">
            <text>个人平台提现限制：</text>
            <text class="font-medium text-[#e74c3c]">2万元/天</text>
          </view>
          <view>
            <text>平台商家提现限制：</text>
            <text class="font-medium text-[#e74c3c]">15万元/天</text>
          </view>
        </view>
        
        <nut-button 
          class="btn btn-primary w-full py-[14rpx] rounded-[10rpx] border-none text-[16rpx] font-semibold bg-gradient-to-r from-[#3498db] to-[#2980b9] text-white shadow-[0_4rpx_12rpx_rgba(52,152,219,0.3)] transition-all duration-300 mb-[10rpx]"
          @click="nextStep"
          :disabled="!userInfo.realName || !userInfo.password || !userInfo.tradePassword"
        >
          下一步
        </nut-button>
        
        <nut-button 
          class="btn btn-outline w-full py-[14rpx] rounded-[10rpx] border-2 border-[#3498db] text-[16rpx] font-semibold bg-transparent text-[#3498db] transition-all duration-300"
          @click="prevStep"
        >
          上一步
        </nut-button>
      </view>
      
      <!-- 会员选择步骤 -->
      <view 
        class="form-container bg-white rounded-[16rpx] p-[25rpx] shadow-[0_6rpx_20rpx_rgba(0,0,0,0.08)] mb-[20rpx] relative overflow-hidden"
        v-if="currentStep === 3"
      >
        <view class="absolute top-0 left-0 right-0 h-[4rpx] bg-gradient-to-r from-[#3498db] to-[#2ecc71]"></view>
        
        <view class="form-title flex items-center text-[18rpx] font-semibold mb-[20rpx] text-[#343a40]">
          <IconFont name="icon-crown" class="mr-[10rpx] text-[#3498db]"></IconFont>
          <text>选择会员类型</text>
        </view>
        
        <view class="radio-group flex flex-wrap gap-[12rpx] mt-[10rpx]">
          <view 
            v-for="member in memberTypes" 
            :key="member.type"
            class="radio-card flex-1 min-w-[120rpx] border-2 border-[#e0e0e0] rounded-[10rpx] p-[15rpx] text-center cursor-pointer transition-all duration-300"
            :class="{ 
              'selected border-[#3498db] bg-[rgba(52,152,219,0.05)] shadow-[0_0_0_3rpx_rgba(52,152,219,0.1)]': selectedMemberType === member.type
            }"
            @click="selectMemberType(member.type)"
          >
            <view class="card-title font-semibold mb-[5rpx]">{{ member.title }}</view>
            <view class="card-price text-[#3498db] font-bold text-[16rpx] mb-[5rpx]">{{ member.price }}</view>
            <view class="card-desc text-[12rpx] text-[#6c757d]">{{ member.desc }}</view>
          </view>
        </view>
        
        <view id="svipOptions" v-if="selectedMemberType === 'svip'">
          <view class="form-group mb-[20rpx] mt-[20rpx]">
            <view class="form-label block mb-[8rpx] font-semibold text-[#343a40]">
              选择身份类型
              <text class="text-[#e74c3c] ml-[4rpx]">*</text>
            </view>
            <nut-picker
              v-model="userType"
              :columns="userTypeOptions"
              title="请选择"
              @confirm="onPickerConfirm"
              @cancel="onPickerCancel"
            >
              <nut-input 
                class="form-control w-full px-[14rpx] py-[14rpx] border border-[#e0e0e0] rounded-[10rpx] text-[15rpx] focus:border-[#3498db] focus:shadow-[0_0_0_3rpx_rgba(52,152,219,0.2)] outline-none transition-all duration-300"
                readonly
              ></nut-input>
            </nut-picker>
          </view>
          
          <view class="info-box bg-[#f8f9fa] border-l-4 border-[#3498db] p-[12rpx_15rpx] rounded-[8rpx] my-[15rpx] text-[13rpx]">
            <view class="mb-[5rpx]">
              <text>SVIP会员可享受更低平台服务费率 (8%)，普通会员服务费为15%</text>
            </view>
            <view>
              <text>在校高校生和退役军人享受优惠价格 </text>
              <text class="font-medium text-[#e74c3c]">¥40/年</text>
            </view>
          </view>
        </view>
        
        <nut-button 
          class="btn btn-primary w-full py-[14rpx] rounded-[10rpx] border-none text-[16rpx] font-semibold bg-gradient-to-r from-[#3498db] to-[#2980b9] text-white shadow-[0_4rpx_12rpx_rgba(52,152,219,0.3)] transition-all duration-300 mb-[10rpx]"
          @click="nextStep"
          :disabled="selectedMemberType === 'svip' && !userType"
        >
          下一步
        </nut-button>
        
        <nut-button 
          class="btn btn-outline w-full py-[14rpx] rounded-[10rpx] border-2 border-[#3498db] text-[16rpx] font-semibold bg-transparent text-[#3498db] transition-all duration-300"
          @click="prevStep"
        >
          上一步
        </nut-button>
      </view>
      
      <!-- 实名认证步骤 -->
      <view 
        class="form-container bg-white rounded-[16rpx] p-[25rpx] shadow-[0_6rpx_20rpx_rgba(0,0,0,0.08)] mb-[20rpx] relative overflow-hidden"
        v-if="currentStep === 4"
      >
        <view class="absolute top-0 left-0 right-0 h-[4rpx] bg-gradient-to-r from-[#3498db] to-[#2ecc71]"></view>
        
        <view class="form-title flex items-center text-[18rpx] font-semibold mb-[20rpx] text-[#343a40]">
          <IconFont name="icon-id-card" class="mr-[10rpx] text-[#3498db]"></IconFont>
          <text>实名认证</text>
        </view>
        
        <view class="form-group mb-[20rpx]">
          <view class="form-label block mb-[8rpx] font-semibold text-[#343a40]">
            身份证号码
            <text class="text-[#e74c3c] ml-[4rpx]">*</text>
          </view>
          <view class="input-group relative">
            <view class="input-icon absolute left-[12rpx] top-1/2 -translate-y-1/2 text-[#6c757d]">
              <IconFont name="icon-id-card" />
            </view>
            <nut-input 
              v-model="userInfo.idCard"
              type="text"
              class="form-control w-full px-[40rpx] py-[14rpx] border border-[#e0e0e0] rounded-[10rpx] text-[15rpx] focus:border-[#3498db] focus:shadow-[0_0_0_3rpx_rgba(52,152,219,0.2)] outline-none transition-all duration-300"
              placeholder="请输入18位身份证号码"
            ></nut-input>
          </view>
        </view>
        
        <view class="form-group mb-[20rpx]">
          <view class="form-label block mb-[8rpx] font-semibold text-[#343a40]">
            支付认证费用
            <text class="text-[#e74c3c] ml-[4rpx]">*</text>
          </view>
          <view class="note text-[12rpx] text-[#6c757d]">
            实名认证需支付¥1.00认证费用
          </view>
          
          <view class="payment-methods flex justify-center gap-[15rpx] my-[20rpx]">
            <view 
              v-for="method in paymentMethods" 
              :key="method.id"
              class="payment-method w-[60rpx] h-[40rpx] border border-[#e0e0e0] rounded-[8rpx] flex items-center justify-center text-[20rpx] text-[#6c757d] cursor-pointer transition-all duration-300"
              :class="{ 'selected border-[#3498db] text-[#3498db] shadow-[0_0_0_2rpx_rgba(52,152,219,0.2)]': selectedPaymentMethod === method.id }"
              @click="selectPaymentMethod(method.id)"
            >
              <IconFont :name="method.icon" />
            </view>
          </view>
          
          <view class="amount-options flex flex-wrap gap-[10rpx] my-[15rpx]">
            <view 
              v-for="amount in amountOptions" 
              :key="amount.value"
              class="amount-option flex-1 min-w-[80rpx] border border-[#e0e0e0] rounded-[8rpx] p-[10rpx] text-center cursor-pointer transition-all duration-300"
              :class="{ 'selected border-[#3498db] bg-[rgba(52,152,219,0.05)]': selectedAmount === amount.value }"
              @click="selectAmount(amount.value)"
            >
              ¥{{ amount.value }}
            </view>
          </view>
          
          <view class="custom-amount flex mt-[10rpx]">
            <nut-input 
              v-model="customAmount"
              type="number"
              class="form-control flex-1 px-[15rpx] py-[14rpx] border border-[#e0e0e0] rounded-[8rpx_0_0_8rpx] text-[15rpx] focus:border-[#3498db] focus:shadow-[0_0_0_3rpx_rgba(52,152,219,0.2)] outline-none transition-all duration-300"
              placeholder="输入自定义金额 (50元以上)"
            ></nut-input>
            <view class="custom-amount-btn bg-[#f1f9ff] border border-[#e0e0e0] border-l-0 rounded-[0_8rpx_8rpx_0] px-[15rpx] text-[#3498db] font-semibold flex items-center justify-center" @click="confirmCustomAmount">
              确定
            </view>
          </view>
          
          <view class="note text-[12rpx] text-[#6c757d] mt-[5rpx]">
            最小充值金额¥5，自定义金额需≥¥50
          </view>
        </view>
        
        <view class="info-box bg-[#f8f9fa] border-l-4 border-[#3498db] p-[12rpx_15rpx] rounded-[8rpx] my-[15rpx] text-[13rpx]">
          <view class="mb-[5rpx]">
            <IconFont name="icon-exclamation-circle" class="mr-[3rpx]"></IconFont>
            <text>实名认证是平台安全的重要保障，认证后即可享受完整平台服务</text>
          </view>
          <view>
            <IconFont name="icon-shield-alt" class="mr-[3rpx]"></IconFont>
            <text>您的身份信息将加密存储，仅用于身份验证</text>
          </view>
        </view>
        
        <nut-button 
          class="btn btn-primary w-full py-[14rpx] rounded-[10rpx] border-none text-[16rpx] font-semibold bg-gradient-to-r from-[#3498db] to-[#2980b9] text-white shadow-[0_4rpx_12rpx_rgba(52,152,219,0.3)] transition-all duration-300 mb-[10rpx]"
          @click="completeRegistration"
          :disabled="!userInfo.idCard || !selectedPaymentMethod || (!selectedAmount && !customAmount)"
        >
          完成注册并支付
        </nut-button>
        
        <nut-button 
          class="btn btn-outline w-full py-[14rpx] rounded-[10rpx] border-2 border-[#3498db] text-[16rpx] font-semibold bg-transparent text-[#3498db] transition-all duration-300"
          @click="prevStep"
        >
          上一步
        </nut-button>
      </view>
      
      <!-- 注册成功页面 -->
      <view 
        class="form-container bg-white rounded-[16rpx] p-[25rpx] shadow-[0_6rpx_20rpx_rgba(0,0,0,0.08)] mb-[20rpx] relative overflow-hidden"
        v-if="currentStep === 5"
      >
        <view class="absolute top-0 left-0 right-0 h-[4rpx] bg-gradient-to-r from-[#3498db] to-[#2ecc71]"></view>
        
        <view class="success-container text-center p-[30rpx_0]">
          <view class="success-icon w-[80rpx] h-[80rpx] bg-[#27ae60] rounded-full flex items-center justify-center mx-auto mb-[20rpx] text-white text-[36rpx]">
            <IconFont name="icon-check" />
          </view>
          <view class="success-title text-[22rpx] font-bold mb-[15rpx] text-[#27ae60]">注册成功！</view>
          <view class="success-message text-[#6c757d] mb-[30rpx] leading-[1.6]">
            <text>恭喜您已完成注册并成功通过实名认证！</text>
            <text class="block">您现在可以享受平台所有服务功能。</text>
            <text class="block">立即开始您的创业之旅吧！</text>
          </view>
          
          <nut-button 
            class="btn btn-primary w-full py-[14rpx] rounded-[10rpx] border-none text-[16rpx] font-semibold bg-gradient-to-r from-[#3498db] to-[#2980b9] text-white shadow-[0_4rpx_12rpx_rgba(52,152,219,0.3)] transition-all duration-300 mb-[10rpx]"
            @click="goToHome"
          >
            进入平台首页
          </nut-button>
          
          <nut-button 
            class="btn btn-outline w-full py-[14rpx] rounded-[10rpx] border-2 border-[#3498db] text-[16rpx] font-semibold bg-transparent text-[#3498db] transition-all duration-300"
            @click="完善资料"
          >
            完善个人资料
          </nut-button>
        </view>
      </view>
      
      <view class="footer text-center p-[20rpx_0] text-[#6c757d] text-[12rpx]">
        <view class="mb-[5rpx]">
          © 2023 创业服务平台 | 
          <text class="text-[#3498db] cursor-pointer" @click="showAgreement">用户协议</text> | 
          <text class="text-[#3498db] cursor-pointer" @click="showPrivacy">隐私政策</text>
        </view>
        <view>客服电话：400-888-8888 | 工作日 9:00-18:00</view>
      </view>
    </view>
  </Page>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Taro } from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { Input as nutInput, Button as nutButton, Picker as nutPicker } from '@nutui/nutui-taro'

// 步骤数据
const steps = ['手机验证', '完善资料', '会员选择', '实名认证']
const currentStep = ref(1)

// 进度条宽度计算
const progressWidth = computed(() => {
  return `${(currentStep.value - 1) / (steps.length - 1) * 100}%`
})

// 表单数据
const phoneNumber = ref('')
const smsCode = ref('')
const userInfo = ref({
  realName: '',
  password: '',
  tradePassword: '',
  inviteCode: '',
  idCard: ''
})

// 会员类型
const memberTypes = [
  { type: 'normal', title: '普通会员', price: '¥0/年', desc: '平台服务费15%' },
  { type: 'svip', title: 'SVIP会员', price: '¥80/年', desc: '平台服务费8%' }
]
const selectedMemberType = ref('svip')
const userType = ref('')
const userTypeOptions = [
  { label: '在校高校生 (¥40/年)', value: 'student' },
  { label: '社会人群 (¥80/年)', value: 'social' },
  { label: '退役军人 (¥40/年)', value: 'veteran' }
]

// 支付方式
const paymentMethods = [
  { id: 1, icon: 'icon-alipay' },
  { id: 2, icon: 'icon-weixin' },
  { id: 3, icon: 'icon-university' }
]
const selectedPaymentMethod = ref(null)

// 充值金额选项
const amountOptions = [
  { value: 5 },
  { value: 20 },
  { value: 50 },
  { value: 100 }
]
const selectedAmount = ref(null)
const customAmount = ref('')

// 验证码倒计时
const isCounting = ref(false)
const countDown = ref(60)

// 发送验证码
const sendSms = () => {
  if (!phoneNumber.value) {
    Taro.showToast({
      title: '请输入手机号码',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (!/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
    Taro.showToast({
      title: '请输入正确的手机号码',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  // 开始倒计时
  isCounting.value = true
  let count = 60
  const timer = setInterval(() => {
    count--
    countDown.value = count
    
    if (count <= 0) {
      clearInterval(timer)
      isCounting.value = false
    }
  }, 1000)
  
  Taro.showToast({
    title: '验证码已发送',
    icon: 'success',
    duration: 2000
  })
}

// 步骤导航
const nextStep = () => {
  if (currentStep.value < steps.length) {
    currentStep.value++
  }
}

const prevStep = () => {
  if (currentStep.value > 1) {
    currentStep.value--
  }
}

// 会员类型选择
const selectMemberType = (type) => {
  selectedMemberType.value = type
}

// 支付方式选择
const selectPaymentMethod = (id) => {
  selectedPaymentMethod.value = id
}

// 金额选择
const selectAmount = (value) => {
  selectedAmount.value = value
  customAmount.value = ''
}

// 自定义金额确认
const confirmCustomAmount = () => {
  if (!customAmount.value) return
  
  const amount = Number(customAmount.value)
  if (amount >= 50) {
    selectedAmount.value = null
  } else {
    Taro.showToast({
      title: '自定义金额需≥¥50',
      icon: 'none',
      duration: 2000
    })
  }
}

// 完成注册
const completeRegistration = () => {
  // 模拟支付过程
  Taro.showLoading({
    title: '处理中...'
  })
  
  setTimeout(() => {
    Taro.hideLoading()
    currentStep.value = 5
    Taro.showToast({
      title: '实名认证成功',
      icon: 'success',
      duration: 2000
    })
  }, 1500)
}

// 进入首页
const goToHome = () => {
  Taro.showToast({
    title: '进入平台首页',
    icon: 'none',
    duration: 2000
  })
  // 实际项目中使用：Taro.navigateTo({ url: '/pages/index/index' })
}

// 查看用户协议
const showAgreement = () => {
  Taro.showToast({
    title: '查看用户协议',
    icon: 'none',
    duration: 2000
  })
}

// 查看隐私政策
const showPrivacy = () => {
  Taro.showToast({
    title: '查看隐私政策',
    icon: 'none',
    duration: 2000
  })
}

// 选择器确认
const onPickerConfirm = (event) => {
  userType.value = event.value[0].text
}

// 选择器取消
const onPickerCancel = () => {
  console.log('Picker cancel')
}
</script>